<template>
  <div id="app1">
    <div class="top">
      <div class="top1">
        <div class="top11">
          <img src="/uploads/zhua.jpg" alt />
        </div>
        <div class="top12">
          <div class="top121">
            <h2>Ole精品超市（苏州龙湖）</h2>
            <i></i>
          </div>
          <p class="ddzs">
            达达专送
            <span>60分钟</span>
          </p>
          <p class="ddzs1">基础运费¥4</p>
        </div>
        <div class="top13">
          <span class="fh1">返回</span>
          <span class="fh2">下单送砍价神刀，一刀最高砍价50%</span>
          <span class="fh3">
            30种优惠
            <i></i>
          </span>
        </div>
      </div>
    </div>
    <div class="conten">
      <div class="conten1">
        <div class="conten11">
          <i></i>
          <input type="text" value="搜索店内商品，共3058件好物" />
        </div>
        <div class="conten12">
          <img src="/uploads/lj.png" alt />
        </div>
      </div>
      <div class="conten-tp">
        <img src="/uploads/xiaoj.jpg" alt />
      </div>
      <div class="conten-cdl">
        <div class="lef">
          <ul>
            <li @click="getSplb1()" v-for="(b,index) in cssp" :key="index">{{b.title}}</li>
          </ul>
        </div>
        <div class="righ">
          <div class="righ1">
            <div class="righ1-lef">为你优选(45)</div>
            <div class="righ1-righ">
              <span>默认排序</span>
              <i></i>
            </div>
          </div>
          <div class="righ2">
            <div class="lslb" v-for="(b,index) in splb" :key="index">
              <div class="lslb-lef">
                <img :src="$baseImgUrl+'/uploads/'+b.img" alt />
              </div>
              <div class="lslb-righ">
                <div class="lslb-righ1">{{b.title1}}</div>
                <div class="lslb-righ2">{{b.title2}}</div>
                <div class="lslb-righ3">
                  <span class="lef">
                    <span>￥{{b.title3}}</span>
                    <!-- <span>￥{{b.title3}}</span> -->
                  </span>
                  <span class="righ">
                    <b v-if="b.num">
                      <button class="righr1" @click="remove(b)"></button>
                      <span class="righg2">{{b.num}}</span>
                    </b>
                    <button class="righh3" @click="add(b)"></button>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="xhuz" @click="jiao()" v-show="hideBtn1">
        <i class="i1"></i>
      </div>
      <ul class="botton1"  v-show="hideBtn1">
        <li v-for="(c,index) in gwc" :key="index">
          <div class="botton2">
            <img :src="$baseImgUrl+'/uploads/'+c.img" alt />
          </div>
          <div class="botton3">
            <div class="botton33">{{c.title1}}</div>
            <!-- <div class="lslb-righ2">{{c.title2}}</div> -->
            <div class="botton4">
              <span class="lef">
                <span>￥{{c.title3}}</span>
              </span>
              <button class="righ">
                <button class="righr" @click="removeGwc(index)"></button>
                <span class="righg">{{c.num}}</span>
                <button class="righh" @click="addGwc(index)"></button>
              </button>
            </div>
          </div>
        </li>
      </ul>
      <div class="xhuz1" @click="jiao()">
        <i class="i2"></i>
        <span class="h3">￥{{totalTitle3}}</span>
        <span class="h4">去结算</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hideBtn1:false,
      gwc: [],
      cssp: [],
      splb: []
    };
  },
  computed: {
    totalTitle3() {
      let sum = 0;
      this.gwc.forEach(el => {
        sum += el.num * el.title3;
      });
      return sum;
    }
  },
  created() {
    this.getGwc();
    this.getCssp();
    this.getSplb();
  },
  methods: {
    jiao(){
      this.hideBtn1=!this.hideBtn1;
    },
    remove(el) {
      el.num--;
      if (el.num === 0) {
        let index;
        this.gwc.forEach((o, title3s) => {
          if ((o.title3 = el.title3)) {
            index = title3s;
          }
        });
        this.gwc.splice(index, 1);
      }
    },
    add(el) {
      let flag = flag;
      this.gwc.forEach(o => {
        if (o.title3 === el.title3) {
          flag = true;
        }
      });
      if (el.num > el.store) {
        return;
      }
      if (!flag) {
        this.$set(el, "num", 1);
        this.gwc.unshift(el);
      } else {
        el.num++;
      }
    },
    addGwc(index) {
      if (this.gwc[index].num > this.gwc[index].store) {
        return
      }
      this.gwc[index].num++;
    },
    removeGwc(index) {
      this.gwc[index].num--;
      if (this.gwc[index].num == 0) {
        this.gwc.splice(index, 1);
      }
    },

    getGwc() {
      this.$api.getGwc(result => {
        this.gwc = result.data.data;
      });
    },
    getSplb() {
      this.$api.getSplb(result => {
        this.splb = result.data.data;
      });
    },
    getSplb1() {
      this.$api.getSplb(result => {
        this.splb = result.data.data;
      });
    },

    getCssp() {
      this.$api.getCssp(result => {
        this.cssp = result.data.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#app1 {
  height: 100vh;
  .bottom {
    width: 370px;
    // border: 1px solid red;
    position: fixed;
    bottom: 0;

    .xhuz1 {
      width: 370px;
      height: 50px;
      // border: 1px solid red;
      position: absolute;
      bottom: 0px;
      background-color:aliceblue;
      z-index: 40;
      .i2 {
        width: 50px;
        height: 50px;
        background: url("/uploads/gwc.png") 0 50px;
        background-size: 50px;
        display: inline-block;
      }
      .h3 {
        width: 50px;
        height: 50px;
        font-size: 22px;
        line-height: 50px;
        margin-left: 10px;
        color: #ff3434;
        display: inline-block;
        position: absolute;
        top: 5px;
      }
      .h4 {
        width: 110px;
        height: 50px;
        color: rgb(255, 255, 255);
        text-align: center;
        line-height: 50px;
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: #00c031;
        z-index: -1;
        // border: 1px solid red;
      }
    }
    .xhuz {
      width: 370px;
      height: 50px;
      // border: 1px solid red;
       background-color: #fff;
       z-index: 100;
      // display:none;
      .i1 {
        width: 50px;
        height: 50px;
        background: url("/uploads/gwc.png") 0 50px;
        background-size: 50px;
        display: inline-block;
      }
    }
    ul {
      width: 370px;
      height: 400px;
      padding: 0px;
      margin: 0px;
      background-color: #fff;
      z-index: 100;
      //  display:none;
      li {
        list-style: none;
        width: 370px;
        height: 80px;
        // border: 1px solid red;
        position: relative;
        .botton4 {
          width: 285px;
          height: 30px;
          // border: 1px solid red;
          .righ {
            width: 80px;
            height: 27px;
            // border: 1px solid red;
            // border: none;
            position: absolute;
            right: 0;

            .righr {
              width: 27px;
              height: 27px;
              background: url("/uploads/shdbda.png") 0 -73px;
              background-size: 100%;
              background-repeat: no-repeat;
              vertical-align: bottom;
              border: 0 solid transparent;
              display: inline-block;
              position: absolute;
              top: -2px;
              right: 50px;
              z-index: 4;
              border: 1px solid floralwhite;
            }
            .righg {
              width: 20px;
              height: 27px;
              line-height: 27px;
              text-align: center;
              // border: 1px solid red;
              position: absolute;
              right: 30px;
              top: -2px;
              display: inline-block;
            }
            .righh {
              width: 27px;
              height: 27px;
              background: url("/uploads/shdbda.png");
              background-size: 100%;
              background-repeat: no-repeat;
              vertical-align: top;
              border: 0 solid transparent;
              display: inline-block;
              position: absolute;
              right: 0;
              top: -2px;
              // border: 1px solid red;
            }
          }
          .lef {
            width: 80px;
            height: 24px;
            color: rgb(255, 87, 87);
            font-size: 18px;
            font-weight: bold;
            border: none;
          }
        }
        .botton3 {
          width: 285px;
          height: 80px;
          // border: 1px solid red;
          position: absolute;
          top: 0px;
          left: 80px;
          .botton33 {
            width: 200px;
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            // border: 1px solid red;
          }
        }
        .botton2 {
          display: inline-block;
          // border: 1px solid red;
          position: absolute;
          left: 20px;
          img {
            width: 50px;
            height: 50px;
            display: inline-block;
          }
        }
      }
    }
  }
  .conten {
    width: 100vw;
    // border: 1px solid red;
    .conten-cdl {
      width: 100vw;
      height: 400px;
      // border: 1px solid red;
      margin-top: 15px;
      position: relative;
      overflow: hidden;

      .righ {
        width: 290px;
        height: 400;
        // border: 1px solid red;
        overflow: auto;
        position: absolute;
        right: 0;
        .righ2 {
          width: 290px;
          height: 600px;
          .lslb {
            width: 290px;
            height: 111px;
            // border: 1px solid red;
            position: relative;
            .lslb-righ {
              width: 180px;
              height: 80px;
              // border: 1px solid red;
              position: absolute;
              right: 8px;
              .lslb-righ3 {
                width: 180px;
                height: 24px;
                .righ {
                  width: 80px;
                  height: 27px;
                  // border: 1px solid red;

                  .righr1 {
                    width: 27px;
                    height: 27px;
                    background: url("/uploads/shdbda.png") 0 -73px;
                    background-size: 100%;
                    background-repeat: no-repeat;
                    vertical-align: bottom;
                    border: 0 solid transparent;
                    display: inline-block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border: 1px solid #fff;
                  }
                  .righg2 {
                    width: 20px;
                    height: 27px;
                    line-height: 27px;
                    text-align: center;
                    // border: 1px solid red;
                    position: absolute;
                    left: 30px;
                    display: inline-block;
                  }
                  .righh3 {
                    width: 27px;
                    height: 27px;
                    background: url("/uploads/shdbda.png");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    vertical-align: top;
                    border: 0 solid transparent;
                    display: inline-block;
                    position: absolute;
                    right: 0;
                    // border: 1px solid red;
                  }
                }
                .lef {
                  width: 80px;
                  height: 24px;
                  color: rgb(255, 87, 87);
                  font-size: 18px;
                  font-weight: bold;
                  border: none;
                }
              }
              .lslb-righ2 {
                width: 180px;
                height: 14px;
                // border: 1px solid red;
                color: rgb(102, 102, 102);
                font-size: 11px;
                line-height: 14px;
              }
              .lslb-righ1 {
                width: 180px;
                color: rgb(51, 51, 51);
                height: 40px;
                font-size: 16px;
                // border: 1px solid red;
              }
            }
            .lslb-lef {
              width: 80px;
              height: 80px;
              // border: 1px solid red;
              position: absolute;
              left: 5px;
              img {
                width: 80px;
                height: 80px;
              }
            }
          }
        }
        .righ1 {
          width: 290px;
          height: 31px;
          // border: 1px solid red;
          .righ1-righ {
            width: 80px;
            height: 31px;
            font-size: 12px;
            color: #666;
            line-height: 31px;
            // border: 1px solid red;
            float: right;
          }
          .righ1-lef {
            width: 170px;
            height: 31px;
            color: #666;
            font-size: 12px;
            line-height: 31px;
            // border: 1px solid red;
            display: inline-block;
          }
        }
      }
      .lef {
        width: 80px;
        height: 600px;
        // border: 1px solid red;
        overflow: auto;
        background-color: #fafafa;
        position: absolute;
        left: 0;
        ul {
          width: 80px;
          height: 1000px;
          padding: 0;
          padding-bottom: 80px;
          background-color: #fafafa;
          position: relative;
          li {
            list-style: none;
            color: #333;
            font-weight: 700;
            // background-color: #fff;
            width: auto;
            height: 46px;
            padding: 2px 12px;
            line-height: 21px;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #666;
            font-size: 14px;
          }
        }
      }
    }

    .conten-tp {
      width: 100vw;
      height: 100px;
      // border: 1px solid red;
      margin-top: 5px;
      img {
        width: 360px;
        height: 100px;
        margin-left: 6px;
      }
    }
    .conten1 {
      width: 375px;
      height: 30px;
      line-height: 30px;
      // border: 1px solid red;
      position: relative;
      .conten12 {
        width: 47px;
        height: 30px;
        // border: 1px solid red;
        display: inline-block;
        position: absolute;
        right: 5px;
        img {
          width: 47px;
          height: 30px;
          display: inline-block;
        }
      }
      .conten11 {
        width: 308px;
        height: 30px;
        border-radius: 15px;
        // border: 1px solid red;
        display: inline-block;
        position: absolute;
        left: 8px;
        background: #f4f4f4;
        overflow: hidden;
        input {
          width: 250px;
          height: 30px;
          line-height: 30px;
          color: #999;
          background-color: #f4f4f4;
          border: none;
        }
        i {
          width: 30px;
          height: 30px;
          background: url("/uploads/ssku.png") no-repeat;
          background-size: 44px auto;
          background-position: -5px -7px;
          background-color: #f4f4f4;
          display: inline-block;
          // border: 1px solid red;
          vertical-align: middle;
        }
      }
    }
  }
  .top {
    width: 100vw;
    height: 124px;
    // border: 1px solid red;
    margin-top: 10px;

    .top1 {
      width: 375px;
      height: 70px;
      // border: 1px solid red;
      .top13 {
        width: 375px;
        height: 16px;
        line-height: 16px;
        // border: 1px solid red;
        position: relative;
        .fh3 {
          width: 70px;
          height: 16px;
          float: right;
          position: absolute;
          right: 8px;
          // border: 1px solid red;
          i {
            width: 13px;
            height: 8px;
            background: url("/uploads/xiabq.png");
            background-size: 100% 100%;
            display: inline-block;
            // border: 1px solid red;
            margin-left: 3px;
          }
        }
        .fh2 {
          width: 200px;
          height: 16px;
          margin-left: 10px;
        }
        .fh1 {
          width: 24px;
          color: floralwhite;
          background-image: linear-gradient(
            135deg,
            rgb(255, 125, 125) 0%,
            rgb(255, 81, 56) 100%
          );
          margin-left: 5px;
        }
        span {
          font-size: 10px;
          height: 16px;
          // border: 1px solid red;
        }
      }
      .top12 {
        width: 285px;
        height: 70px;
        display: inline-block;
        position: relative;
        .ddzs1 {
          width: 285px;
          height: 15px;
          // border: 1px solid red;
          line-height: 15px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 10px;
          margin-top: -10px;
          margin-left: 10px;
        }
        .ddzs {
          width: 285px;
          height: 15px;
          // border: 1px solid red;
          line-height: 15px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 10px;
          margin-top: 0px;
          margin-left: 10px;
        }

        .top121 {
          width: 285px;
          height: 31px;
          line-height: 31px;
          // border: 1px solid red;
          margin-left: 10px;
          h2 {
            line-height: 22px;
            font-size: 18px;
            font-weight: 700;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 5px;
          }
          i {
            display: block;
            width: 30px;
            height: 30px;
            background-image: url("/uploads/820.png");
            background-repeat: no-repeat;
            background-position: 3px 4px;
            background-size: 60px auto;
            background-size: 68px auto;
            position: absolute;
            top: 0px;
            right: 0px;
          }
        }
      }
      .top11 {
        width: 68px;
        height: 68px;
        // border: 1px solid hotpink;
        display: block;
        float: left;
        margin-left: 5px;
        img {
          width: 68px;
          height: 68px;
          display: inline-block;
        }
      }
    }
  }
}
</style>
<style lang="scss">
body {
  padding: 0px;
  margin: 0px;
}
</style>